<template>
  <!-- <i :class="classes" :style="getStyles"></i> -->
  <svg class="iconfont" aria-hidden="true" :style="getStyles">
    <use :xlink:href="href"></use>
  </svg>
</template>
<script>
// const fontFamily = "iconfont";
const prefixCls = "zkms-";
export default {
  name: "icon",
  componentName: "icon",
  props: {
    type: String,
    size: [Number, String],
    color: String,
    fontStyle: {
      default: "normal",
      type: String
    },
    // 自定义样式
    styles: {
      type: Object,
      default: () => {
        return {};
      }
    },
    // 旋转角度
    rotate: {
      type: Number,
      default: 0
    }
  },
  computed: {
    href() {
      return `#${prefixCls + this.type}`;
    },
    // classes() {
    //   return `${fontFamily} ${prefixCls + this.type}`;
    // },
    getStyles() {
      let style = {};
      style["font-style"] = `normal`;
      // style["margin-right"] = "10px";
      style["font-size"] = this.size ? `${this.size}px` : "14px";
      if (this.fontStyle) {
        style["font-style"] = this.fontStyle;
      }
      if (this.color) {
        style.color = this.color;
      }
      if (this.rotate) {
        style["display"] = "inline-block";
        style["transform"] = `rotate(${this.rotate}deg)`;
      }
      style = {
        ...style,
        ...this.styles
      };
      return style;
    }
  }
};
</script>

<style lang="scss" scoped>
.iconfont {
  margin-right: 10px;
}
.ant-btn-circle .iconfont {
  margin-right: 0 !important;
}
</style>
